<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
export default defineComponent({
    name: "JxtechSelectInput"
})
</script>
<script lang='ts' setup>
const emit = defineEmits<{
    (e: 'update:inputValue', value: string | undefined): void//更新属性值
    (e: 'select-click'): void//选择按钮点击
    (e: 'clear-click'): void//清理按钮点击
}>()

const props = defineProps({
    /**输入框显示文字 */
    inputValue: String,
    /**提示文字 */
    placeholder: String,
    /**是否显示清理按钮 */
    clearBtnShow: {
        type: Boolean,
        default: true
    }
})

//设置是否显示双向绑定
const inputValueModelValue = ref(props.inputValue)
watch(() => props.inputValue, val => {
    inputValueModelValue.value = val;
})
watch(inputValueModelValue, val => {
    emit("update:inputValue", val)
})


const CmStructTreeDialogState = reactive({
    /**搜索按钮点击事件*/
    onSelectBtnClick: () => {
        emit("select-click")
    },
    // 清除按钮点击事件
    onClearBtnClick: () => {
        emit("clear-click")
    }
})

</script>
<template>
    <div class="jxtech-select-input-container">
        <div class="jxtech-select-input-btn">
            <div class="btn" @click="CmStructTreeDialogState.onSelectBtnClick">
                <jxtech-svg-icon icon="#icon-search" :size="20"></jxtech-svg-icon>
            </div>
            <div
                class="clear-btn btn"
                v-if="clearBtnShow"
                @click="CmStructTreeDialogState.onClearBtnClick"
            >
                <jxtech-svg-icon icon="#icon-guanbi" :size="20"></jxtech-svg-icon>
            </div>
        </div>
        <slot>
            <el-input :placeholder="placeholder" v-model="inputValueModelValue" disabled></el-input>
        </slot>
    </div>
</template>
<style lang="scss"  scoped>
.jxtech-select-input-container {
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    overflow: hidden;
    padding-right: 49px;
    .jxtech-select-input-btn {
        z-index: 12;
        height: 100%;
        width: 80px;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        display: flex;
        justify-content: flex-end;
        background-color: #fff;
        .btn {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            min-width: 40px;
            background-color: #f9f9f9;
            border-left: 1px solid #dcdfe6;
            color: rgb(177, 177, 177);
            &:active {
                background-color: rgb(230, 230, 230, 0.3);
            }
        }
    }
}
::v-deep(.el-input__inner) {
    border: none !important;
    border-radius: unset !important;
}
</style>